<template>
  <div class="h-full flex flex-col">
    <div class="chart_title">客户数量</div>
    <div ref="chartRef" class="flex-1 mt-4"></div>
  </div>
</template>

<script setup>
import echarts from "~/utils/echarts.config";
import { spirit } from "@/views/chart/common/base64Image.js";
import useEcharts from "@/hooks/useEcharts";

const props = defineProps({
  datas: {
    type: Array,
    required: true,
  },
});
const { echartResize, echartFontSetting } = useEcharts();
const chartRef = ref();
const myChart = ref();
const MAX = 50000;

const chartInit = () => {
  const option = {
    grid: {
      left: "5%", // 图表左边距占整体宽度的百分比
      right: "5%", // 图表右边距占整体宽度的百分比
      top: "5%", // 图表上边距占整体高度的百分比
      bottom: "5%", // 图表下边距占整体高度的百分比
      containLabel: true, // 是否包含坐标轴标签，默认为 false
    },
    // x轴配置
    xAxis: {
      max: MAX, // x轴最大值，需要根据数据进行设置
      splitLine: { show: false }, // x轴网格线配置，这里设置不显示
      offset: 10, // x轴与边框的偏移量
      axisLine: {
        lineStyle: {
          color: "#333", // x轴轴线颜色
        },
      },
      axisLabel: {
        formatter: "{value} 人", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
      },
    },
    // y轴配置
    yAxis: {
      data: props.datas.map(item => item.name),
      inverse: false, // y轴反向显示
      axisTick: { show: false }, // y轴刻度线配置，这里设置不显示
      axisLine: { show: false }, // y轴轴线配置，这里设置不显示
      axisLabel: {
        margin: 10, // y轴标签与轴线的距离
        color: "#333", // y轴标签颜色
        fontSize: 16, // y轴标签字体大小
      },
    },
    // 数据系列配置
    series: [
      {
        // 当前数据
        type: "pictorialBar", // 象形柱状图
        symbol: spirit, // 自定义的图形符号
        symbolRepeat: "fixed", // 图形符号的重复方式
        symbolMargin: "5%", // 图形符号的间距
        symbolClip: true, // 是否裁剪超出坐标系的图形符号
        symbolSize: 30, // 图形符号的大小
        symbolBoundingData: MAX, // 图形符号的绑定数据，用于确定图形符号的最大尺寸
        data: props.datas.map(item => item.value),
        markLine: {
          symbol: "none", // 标线的图形符号，这里设置为无
          label: {
            formatter: "max: {c}", // 标线标签的格式化字符串
            position: "start", // 标线标签的位置
          },
          lineStyle: {
            color: "green", // 标线的颜色
            type: "dotted", // 标线的线型
            opacity: 0.2, // 标线的透明度
            width: 2, // 标线的宽度
          },
          data: [
            {
              type: "max", // 标线类型为最大值
            },
          ],
        },
        z: 10, // 数据系列的层级，数值越大越在上层显示
      },
      {
        // 完整数据
        type: "pictorialBar", // 图表类型为象形柱状图
        itemStyle: {
          opacity: 0.3, // 数据系列的透明度
        },
        label: {
          show: true, // 显示标签
          formatter: params => {
            return ((params.value / MAX) * 100).toFixed(1) + " %"; // 标签格式化字符串，显示数据值的百分比
          },
          position: "right", // 标签的位置
          offset: [10, 0], // 标签的偏移量
          color: "green", // 标签的颜色
          fontSize: 18, // 标签的字体大小
        },
        animationDuration: 0, // 动画的持续时间，设置为0表示无动画效果
        symbolRepeat: "fixed", // 图形符号的重复方式
        symbolMargin: "5%", // 图形符号的间距
        symbol: spirit, // 自定义的图形符号
        symbolSize: 30, // 图形符号的大小
        symbolBoundingData: MAX, // 图形符号的绑定数据，用于确定图形符号的最大尺寸
        data: props.datas.map(item => item.value),
        z: 5, // 数据系列的层级，数值越大越在上层显示
      },
    ],
  };
  option && myChart.value.setOption({ ...option, ...echartFontSetting() });
};

watch(() => props.datas, chartInit);

onMounted(() => {
  myChart.value = echarts.init(chartRef.value);
  echartResize(myChart.value);
  chartInit();
});
</script>

<style lang="scss" scoped></style>
